<template>
  <div class="groupContainer">
      <div class="topTitle">
          <span>分组管理</span>
          <p @touchend="$router.back()">完成</p>
      </div>
      <!-- 添加分组 -->
      <div class="addNew" @touchend="inputItem.show=true">
          <yd-icon  name="addNew"  custom slot="icon" size=".35rem" color='#FFB36E'></yd-icon>
                <span>添加分组</span>
      </div>
      <!-- 分组列表 -->
      <div class="groupList" @touchend="deleteBack()">
          <div v-for="(list,index) in list" :key="index" class="item">
              <img src="./img/remove.png" @touchend="toDelete($event)"><input :readonly="read" v-model="list.name" class="name">
              <span @click="del($event,index)" class="delete">删除</span>
          </div>
      </div>
      <!-- 弹出框 -->
      <yd-actionsheet :items="myItems1" v-model="acShow" cancel="取消"></yd-actionsheet>
      <!-- 弹出输入框 -->
      <yl-pop-input :ylPop="inputItem" v-if="inputItem.show" @resVal="getMsg"></yl-pop-input>
  </div>
</template>
<script>
import ylPopInput from '@/components/popInput'
export default {
  components:{ylPopInput},
  data(){
      return {
          list:[
                {"id":"1","name":"分组一","count":"0"},
                {"id":"2","name":"分组二","count":"10"},
                {"id":"3","name":"分组三","count":"2"},
                {"id":"4","name":"分组四","count":"1"},
                {"id":"5","name":"分组五","count":"1"},
                {"id":"6","name":"分组六","count":"0"},
              ],
        inputItem:{//弹出输入框
              cancel:this.cancel,
              show:false,
              title:"添加分组",
              holder:"请为新分组输入名称"
          },
          read:false, //控制input为可读
          acShow:false,
          touchendIndex:'',
          myItems1: [
                    {
                        label: '删除',
                        callback: () => {
                            console.log(this.touchendIndex);
                           if(this.list[this.touchendIndex].count!=0){
                               this.$dialog.confirm({
                                    title: '提示',
                                    mes: '您的分组中有好友存在，删除后好友会放到默认分组',
                                    opts: () => {
                                        // 此处请求服务器
                                       this.list.splice(this.touchendIndex,1)//页面中删除
                                       this.deleteBack()
                                    }
                                });
                           }else{
                                 // 此处请求服务器
                                       this.list.splice(this.touchendIndex,1)//页面中删除
                                       this.deleteBack()
                           }
                        }
                    }
        ]
      }
  },
  methods:{
      toDelete(e){//减号点击事件
          e.stopPropagation()//阻止事件冒泡
          let item=document.querySelectorAll('.groupContainer .item')
          for(let i=0;i<item.length;i++){
              item[i].style.marginLeft="0"
              item[i].firstElementChild.nextElementSibling.readOnly=false
          }
         e.target.parentNode.style.marginLeft="-15%";
         this.read=true
      },
      deleteBack(){//点击父元素恢复位置
           let item=document.querySelectorAll('.groupContainer .item')
            for(let i=0;i<item.length;i++){
                if(item[i].style.marginLeft=="-15%"){
                      item[i].style.marginLeft="0"
                }
          }
      },
      del(e,index){//删除
       e.stopPropagation()//阻止事件冒泡
        this.acShow=true;
        this.touchendIndex=index
      },
        cancel(){//取消按钮
         this.inputItem.show=false
      },
      getMsg(data){
           this.inputItem.show=false
          console.log(data)
          let newGroup={"name":data}
          this.list.push(newGroup)
      }
  }
}
</script>

<style lang="less" scoped>
@import "~less/base";
    .groupContainer{
        background-color:@background-bg;
        overflow-x: hidden;
        .topTitle{//顶部返回以及完成
            position: fixed;
            top: 0;
            height: 1rem;
            line-height: 1rem;
            font-size: 16px;
            text-align: center;
            width: 100%;
            background-color:@background-bg;
            border-bottom:.01rem solid @color-border6;
            p{
                position: absolute;
                top: 0;
                right:.2rem;
            }
        }
        .addNew{//添加分组
            position: fixed;
            top: 1rem;
            height: 1rem;
            line-height: 1rem;
            padding-left: .5rem;
             background-color:@background-bg;
             width: 100%;
            border-bottom:.01rem solid @color-border6;
            span{
                margin-left: .2rem;
                font-size: .32rem;
                color: @background-a
            }
        }
        .groupList{//分组列表
            margin-top: 1rem;
            .item{ 
                border-bottom: .01rem solid @color-border6; 
                width: 115%;
                transition:all .2s linear;
                img{
                    width: .4rem;
                    vertical-align:middle;
                    margin-left: .2rem;
                }
                .name{
                    margin-left: .1rem;
                    font-size: 14px;
                    outline: none;
                    border: 0;
                    width: 80%;
                    height: 1rem;
               
                }
                .delete{
                    float: right;
                    color: @color-c;
                    margin-right: .1rem;
                    background-color: red;
                    padding: .1rem;
                    border-radius: 2px;
                    margin-top: .2rem;
                }
            }
        }
    }
</style>
